<template>
    <div>
        <el-row>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                        <el-form-item label="部门名称">
                            <el-input v-model="queryMap.deptName" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="6" :offset="8">
                <el-button-group>
                    <el-button icon="el-icon-plus" type="primary" @click="openAdd">新增</el-button>
                    <el-button icon="el-icon-edit" type="primary" @click="openEdit">修改</el-button>
                    <el-button icon="el-icon-delete" type="primary" @click="delDept">删除</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                :height="530"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            >
            <el-table-column
                    prop="deptId"
                    type="selection"
            >

            </el-table-column>
            <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="部门名称"
                    prop="deptName"
                    width="180"
            >
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination
                :current-page="queryMap.page"
                :page-size="queryMap.limit"
                :page-sizes="[10, 20, 50, 100, 200]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
        <DeptFrom
                :formData="formData"
                :formVisible.sync=formVisible
                :isEdit="isEdit"
                @submitForm="save"
        >
        </DeptFrom>
    </div>
</template>

<script>
import DeptFrom from "@/views/dept/DeptForm.vue";

export default {
    name: "DeptView",
    data() {
        return {
            //查询条件
            queryMap: {
                page: 1,  // 当前页码
                limit: 10, // 每页条数
                deptName: '',//部门名称
            },
            // 总条数
            total: 0,
            tableData: [],
            // 新增表单数据
            formData: {
                deptId: '',
                deptName: ''
            },
            // 新增表单显隐
            formVisible: false,
            //标志新增还是修改,false为新增
            isEdit: false,
            //复选框选中的数据
            multipleSelection: [],
        }
    },
    methods: {
        // 分页查询部门信息
        getDeptList() {
            const self = this
            this.$http.post('getDeptByPage', this.queryMap).then(res => {
                self.tableData = res.data.depts
                self.total = res.data.count
            }).catch(() => {
                this.$message.error('获取部门列表失败，请联系管理员')
            })
        },
        // 点击查询按钮
        search() {
            // 重置页面未第一页
            this.queryMap.page = 1;
            this.getDeptList();
        },
        // 每页条数改变，val是改变后的每页条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1;
            this.getDeptList();
        },
        // 页码改变，val是修改后的页面
        handleCurrentChange(val) {
            this.queryMap.page = val;
            this.getDeptList();
        },
        //点击复选框触发,val是勾选中的数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //删除部门
        delDept() {
            const self = this
            //判断是否选中了一条数据,
            if (this.multipleSelection.length === 0) {
                self.$message({
                    type: 'info',
                    message: "请选择要删除的数据"
                })
                return
            }
            //询问用户
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确认的回调
                //存放要删除的员工的主键
                //删除部门时需要验证部门下面是否有员工,如果有,不能删除
                let deptArr = [];
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    deptArr.push(self.multipleSelection[i].deptId)
                }
                self.$http.post('delDept', deptArr).then(res => {
                    if (res.data === 'success') {
                        self.$message({
                            type: "success",
                            message: "删除成功"
                        })
                        //刷新列表
                        self.queryMap.page = 1;
                        self.getDeptList()

                    } else {
                        self.$message.error(res.data)
                    }
                }).catch(() => {
                    self.$message.error("删除部门失败,请重试")
                })
            }).catch(() => {
                //点击取消的回调
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 点击新增按钮
        openAdd() {
            this.isEdit = false
            // 重置表单
            this.formData = {
                deptId: '',
                deptName: ''
            }
            this.formVisible = true
        },
        //点击修改按钮
        openEdit() {
            const self = this
            //判断是否选中了一条数据,
            if (self.multipleSelection.length === 0) {
                self.$message({
                    type: 'warning',
                    message: "请选择要修改的数据"
                })
            } else if (self.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: "只能选择一条数据"
                })
            } else {
                //获取选中行的主键
                let deptId = this.multipleSelection[0].deptId;
                this.$http.get("/getDeptById/" + deptId).then(res => {
                    //根据主键获取要修改的数据
                    self.formData = res.data
                    self.isEdit = true
                    self.formVisible = true
                }).catch(error => {
                    self.$message.error("获取员工对象失败")
                })
            }
        },
        // 保存新增
        save(formData) {
            //判断新增还是修改
            if (!this.isEdit) {
                this.$http.post("addDept", formData).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page = 1;
                        this.getDeptList();
                    } else {
                        this.$message.error("保存失败")
                    }
                }).catch(() => {
                    this.$message.error("保存失败,请...")
                })
            } else {
                this.$http.post("editDept", formData).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page = 1;
                        this.getDeptList();
                    } else {
                        this.$message.error("修改失败")
                    }
                }).catch(() => {
                    this.$message.error("修改部门失败,请重试")
                })
            }
        },
    },
    components: {
        DeptFrom
    },
    created() {
        this.getDeptList();
    }
}
</script>

<style scoped>
.tab {
    height: 600px;
    width: 100%;
    background-color: pink;
}

.input-width {
    width: 200px;
}

.myTitle {
    border-bottom: 1px solid black;
    padding: 5px 0;
    margin-bottom: 10px;
    margin-top: -45px;
}

.myForm {
    border: 1px solid black;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 20px;
}

.myTable {
    margin-top: 5px;
}

.diyBorder {
    border: 1px solid black;
}
</style>